<script setup lang="ts">
	import carousel from '../assets/images/carousel.jpg'

	const cardLoading = ref(false)
	const props = defineProps({
		data: {
			type: String,
			default: ''
		},
		title: {
			type: String,
			default: ''
		}
	})
	const onChange = (current: number) => {
	}
</script>

<template>
	<a-card :bordered="false" :loading="cardLoading">
		<h4>{{ props.title }}</h4>
		<a-divider />
		<a-carousel :after-change="onChange" autoplay>
			<a-image class="w-full" :src="carousel" :preview="false"></a-image>
			<div><h3>2</h3></div>
			<div><h3>3</h3></div>
			<div><h3>4</h3></div>
		</a-carousel>
		<p class="mt-2">函数的积分环节上的发货</p>
	</a-card>
</template>

<style scoped lang="less">
	:deep(.ant-divider-horizontal) {
		margin-top: 10px;
	}

	:deep(.slick-slide) {
		text-align: center;
		height: 160px;
		line-height: 160px;
		background: #364d79;
		overflow: hidden;
	}

	:deep(.slick-slide h3) {
		color: #fff;
	}

	:deep(.ant-image) {
		width: 100%;
	}
</style>
